/*天气*/
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { actionCreators } from './store'

import './style.less';

class Weather extends Component {
  render() {
    const { dayPictureUrl, weather, currentCity } = this.props;
    return (
      <div className="pinlor-weather">
        <span>{currentCity}</span>
        <img src={dayPictureUrl} alt="" />
        <span>{weather}</span>
      </div>
    )
  }

  componentDidMount() {
    // 如果没有天气信息，先请求一次天气信息
    const {getWeatherData, weather} = this.props;
    !weather && getWeatherData();
  }
}

const mapStateToProps = state => {
  const { currentCity, dayPictureUrl, weather } = state.weather;
  return {
    currentCity,
    dayPictureUrl,
    weather
  }
};

const mapDispatchToProps = dispatch => {
  return {
    getWeatherData() {
      dispatch(actionCreators.getWeatherData());
    }
  }
};

export default connect(mapStateToProps, mapDispatchToProps)(Weather);
